<script lang="ts" setup>
import { ref } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';

import DynamicRouting from '@/views/demo/dynamic-routing.vue';

const router = useRouter();
const route = useRoute();
const isError = ref(false);
onBeforeRouteUpdate(({ query }) => {
  if (Number(query?.queryId) !== 234) {
    isError.value = true;
  } else {
    isError.value = false;
  }
});

const addRouter = () => {
  const path = String(Math.random() * 100);
  router.addRoute('router', { path: 'sub', name: 'sub', component: DynamicRouting });
  router.push(`/demo/router/${path}/sub`);
};
</script>

<template>
  <div class="router-container p-2">
    <el-card class="box-card">
      Params 路由参数：{{ route.params?.paramsId }}
      <el-divider />
      Query 路由参数：{{ route.query?.queryId }}
      <el-divider v-if="isError" />
      <span v-if="isError" class="text-red-500">路由解析异常 queryId 必须为 234</span>
      <el-divider />
      <el-button @click="addRouter">添加新路由</el-button>
      <router-view></router-view>
    </el-card>
  </div>
</template>

<style lang="scss" scoped></style>
